<template>
    <div class="system-settings">
        <a-page-header title="系统设置" sub-title="配置系统各项参数和功能" :ghost="false">
            <template #extra>
                <a-space>
                    <a-button @click="resetSettings">重置设置</a-button>
                    <a-button type="primary" @click="saveAllSettings" :loading="saving">
                        保存所有设置
                    </a-button>
                </a-space>
            </template>
        </a-page-header>

        <a-tabs v-model:activeKey="activeTab" type="card" size="large">
            <!-- 网站设置 -->
            <a-tab-pane key="website" tab="网站设置">
                <a-card title="基础信息" :bordered="false">
                    <a-form :model="websiteSettings" layout="vertical">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="网站名称" name="siteName">
                                    <a-input v-model:value="websiteSettings.siteName" placeholder="请输入网站名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="网站标题" name="siteTitle">
                                    <a-input v-model:value="websiteSettings.siteTitle" placeholder="请输入网站标题" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="网站Logo" name="siteLogo">
                                    <a-upload v-model:file-list="logoFileList" :before-upload="beforeLogoUpload"
                                        :max-count="1" list-type="picture-card" accept="image/*">
                                        <div v-if="logoFileList.length < 1">
                                            <plus-outlined />
                                            <div style="margin-top: 8px">上传Logo</div>
                                        </div>
                                    </a-upload>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="网站图标" name="siteFavicon">
                                    <a-upload v-model:file-list="faviconFileList" :before-upload="beforeFaviconUpload"
                                        :max-count="1" list-type="picture-card" accept="image/*">
                                        <div v-if="faviconFileList.length < 1">
                                            <plus-outlined />
                                            <div style="margin-top: 8px">上传图标</div>
                                        </div>
                                    </a-upload>
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-form-item label="网站描述" name="siteDescription">
                            <a-textarea v-model:value="websiteSettings.siteDescription" :rows="3"
                                placeholder="请输入网站描述" />
                        </a-form-item>

                        <a-form-item label="关键词" name="siteKeywords">
                            <a-select v-model:value="websiteSettings.siteKeywords" mode="tags" placeholder="请输入关键词"
                                style="width: 100%" />
                        </a-form-item>

                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="备案信息" name="icp">
                                    <a-input v-model:value="websiteSettings.icp" placeholder="请输入备案信息" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="版权信息" name="copyright">
                                    <a-input v-model:value="websiteSettings.copyright" placeholder="请输入版权信息" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-form-item label="联系方式" name="contact">
                            <a-textarea v-model:value="websiteSettings.contact" :rows="3" placeholder="请输入联系方式" />
                        </a-form-item>
                    </a-form>
                </a-card>
            </a-tab-pane>

            <!-- 安全设置 -->
            <a-tab-pane key="security" tab="安全设置">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-card title="密码策略" :bordered="false">
                            <a-form :model="securitySettings" layout="vertical">
                                <a-form-item label="最小密码长度">
                                    <a-input-number v-model:value="securitySettings.minPasswordLength" :min="6"
                                        :max="20" style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="密码复杂度要求">
                                    <a-checkbox-group v-model:value="securitySettings.passwordRequirements">
                                        <a-checkbox value="uppercase">必须包含大写字母</a-checkbox>
                                        <a-checkbox value="lowercase">必须包含小写字母</a-checkbox>
                                        <a-checkbox value="numbers">必须包含数字</a-checkbox>
                                        <a-checkbox value="symbols">必须包含特殊字符</a-checkbox>
                                    </a-checkbox-group>
                                </a-form-item>

                                <a-form-item label="密码有效期(天)">
                                    <a-input-number v-model:value="securitySettings.passwordExpiryDays" :min="0"
                                        :max="365" style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="登录失败锁定">
                                    <a-switch v-model:checked="securitySettings.loginLockEnabled" />
                                </a-form-item>

                                <a-form-item label="最大登录失败次数" v-if="securitySettings.loginLockEnabled">
                                    <a-input-number v-model:value="securitySettings.maxLoginAttempts" :min="3" :max="10"
                                        style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="锁定时间(分钟)" v-if="securitySettings.loginLockEnabled">
                                    <a-input-number v-model:value="securitySettings.lockoutDuration" :min="5"
                                        :max="1440" style="width: 100%" />
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </a-col>

                    <a-col :span="12">
                        <a-card title="会话管理" :bordered="false">
                            <a-form :model="securitySettings" layout="vertical">
                                <a-form-item label="会话超时时间(分钟)">
                                    <a-input-number v-model:value="securitySettings.sessionTimeout" :min="5" :max="1440"
                                        style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="允许同时登录">
                                    <a-switch v-model:checked="securitySettings.allowMultipleSessions" />
                                </a-form-item>

                                <a-form-item label="最大同时登录数" v-if="securitySettings.allowMultipleSessions">
                                    <a-input-number v-model:value="securitySettings.maxSessions" :min="1" :max="10"
                                        style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="强制HTTPS">
                                    <a-switch v-model:checked="securitySettings.forceHttps" />
                                </a-form-item>

                                <a-form-item label="CSRF保护">
                                    <a-switch v-model:checked="securitySettings.csrfProtection" />
                                </a-form-item>

                                <a-form-item label="XSS保护">
                                    <a-switch v-model:checked="securitySettings.xssProtection" />
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </a-col>
                </a-row>
            </a-tab-pane>

            <!-- 邮件设置 -->
            <a-tab-pane key="email" tab="邮件设置">
                <a-card title="SMTP配置" :bordered="false">
                    <a-form :model="emailSettings" layout="vertical">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="SMTP服务器" name="smtpHost">
                                    <a-input v-model:value="emailSettings.smtpHost" placeholder="例如: smtp.gmail.com" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="SMTP端口" name="smtpPort">
                                    <a-input-number v-model:value="emailSettings.smtpPort" :min="1" :max="65535"
                                        style="width: 100%" placeholder="例如: 587" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="邮箱账号" name="emailUsername">
                                    <a-input v-model:value="emailSettings.emailUsername" placeholder="请输入邮箱账号" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="邮箱密码" name="emailPassword">
                                    <a-input-password v-model:value="emailSettings.emailPassword"
                                        placeholder="请输入邮箱密码" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-form-item label="加密方式" name="encryption">
                            <a-radio-group v-model:value="emailSettings.encryption">
                                <a-radio value="none">无加密</a-radio>
                                <a-radio value="ssl">SSL</a-radio>
                                <a-radio value="tls">TLS</a-radio>
                            </a-radio-group>
                        </a-form-item>

                        <a-form-item label="发件人名称" name="senderName">
                            <a-input v-model:value="emailSettings.senderName" placeholder="请输入发件人名称" />
                        </a-form-item>

                        <a-form-item label="发件人邮箱" name="senderEmail">
                            <a-input v-model:value="emailSettings.senderEmail" placeholder="请输入发件人邮箱" />
                        </a-form-item>

                        <a-form-item>
                            <a-space>
                                <a-button type="primary" @click="testEmailConnection">测试连接</a-button>
                                <a-button @click="sendTestEmail">发送测试邮件</a-button>
                            </a-space>
                        </a-form-item>
                    </a-form>
                </a-card>

                <a-card title="邮件模板" :bordered="false" style="margin-top: 24px">
                    <a-tabs v-model:activeKey="emailTemplateTab" type="card">
                        <a-tab-pane key="welcome" tab="欢迎邮件">
                            <a-form :model="emailSettings.templates.welcome" layout="vertical">
                                <a-form-item label="邮件主题">
                                    <a-input v-model:value="emailSettings.templates.welcome.subject" />
                                </a-form-item>
                                <a-form-item label="邮件内容">
                                    <a-textarea v-model:value="emailSettings.templates.welcome.content" :rows="8"
                                        placeholder="支持HTML格式，可使用变量：{{username}}、{{siteName}}等" />
                                </a-form-item>
                            </a-form>
                        </a-tab-pane>

                        <a-tab-pane key="reset" tab="密码重置">
                            <a-form :model="emailSettings.templates.reset" layout="vertical">
                                <a-form-item label="邮件主题">
                                    <a-input v-model:value="emailSettings.templates.reset.subject" />
                                </a-form-item>
                                <a-form-item label="邮件内容">
                                    <a-textarea v-model:value="emailSettings.templates.reset.content" :rows="8"
                                        placeholder="支持HTML格式，可使用变量：{{username}}、{{resetLink}}等" />
                                </a-form-item>
                            </a-form>
                        </a-tab-pane>
                    </a-tabs>
                </a-card>
            </a-tab-pane>

            <!-- 支付设置 -->
            <a-tab-pane key="payment" tab="支付设置">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-card title="支付宝配置" :bordered="false">
                            <a-form :model="paymentSettings.alipay" layout="vertical">
                                <a-form-item label="应用ID">
                                    <a-input v-model:value="paymentSettings.alipay.appId" placeholder="请输入支付宝应用ID" />
                                </a-form-item>

                                <a-form-item label="商户私钥">
                                    <a-textarea v-model:value="paymentSettings.alipay.privateKey" :rows="4"
                                        placeholder="请输入商户私钥" />
                                </a-form-item>

                                <a-form-item label="支付宝公钥">
                                    <a-textarea v-model:value="paymentSettings.alipay.publicKey" :rows="4"
                                        placeholder="请输入支付宝公钥" />
                                </a-form-item>

                                <a-form-item label="启用支付宝">
                                    <a-switch v-model:checked="paymentSettings.alipay.enabled" />
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </a-col>

                    <a-col :span="12">
                        <a-card title="微信支付配置" :bordered="false">
                            <a-form :model="paymentSettings.wechat" layout="vertical">
                                <a-form-item label="商户号">
                                    <a-input v-model:value="paymentSettings.wechat.mchId" placeholder="请输入微信商户号" />
                                </a-form-item>

                                <a-form-item label="商户密钥">
                                    <a-input-password v-model:value="paymentSettings.wechat.key"
                                        placeholder="请输入商户密钥" />
                                </a-form-item>

                                <a-form-item label="证书文件">
                                    <a-upload v-model:file-list="wechatCertFileList"
                                        :before-upload="beforeWechatCertUpload" :max-count="1" accept=".pem,.p12">
                                        <a-button>
                                            <upload-outlined />
                                            上传证书
                                        </a-button>
                                    </a-upload>
                                </a-form-item>

                                <a-form-item label="启用微信支付">
                                    <a-switch v-model:checked="paymentSettings.wechat.enabled" />
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </a-col>
                </a-row>

                <a-card title="支付配置" :bordered="false" style="margin-top: 24px">
                    <a-form :model="paymentSettings" layout="vertical">
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item label="默认支付方式">
                                    <a-select v-model:value="paymentSettings.defaultPayment">
                                        <a-select-option value="alipay">支付宝</a-select-option>
                                        <a-select-option value="wechat">微信支付</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="支付超时时间(分钟)">
                                    <a-input-number v-model:value="paymentSettings.timeout" :min="5" :max="60"
                                        style="width: 100%" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="启用支付通知">
                                    <a-switch v-model:checked="paymentSettings.notificationEnabled" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>
            </a-tab-pane>

            <!-- AI设置 -->
            <a-tab-pane key="ai" tab="AI设置">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-card title="OpenAI配置" :bordered="false">
                            <a-form :model="aiSettings.openai" layout="vertical">
                                <a-form-item label="API密钥">
                                    <a-input-password v-model:value="aiSettings.openai.apiKey"
                                        placeholder="请输入OpenAI API密钥" />
                                </a-form-item>

                                <a-form-item label="模型选择">
                                    <a-select v-model:value="aiSettings.openai.model">
                                        <a-select-option value="gpt-3.5-turbo">GPT-3.5 Turbo</a-select-option>
                                        <a-select-option value="gpt-4">GPT-4</a-select-option>
                                        <a-select-option value="gpt-4-turbo">GPT-4 Turbo</a-select-option>
                                    </a-select>
                                </a-form-item>

                                <a-form-item label="最大Token数">
                                    <a-input-number v-model:value="aiSettings.openai.maxTokens" :min="100" :max="4000"
                                        style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="温度">
                                    <a-slider v-model:value="aiSettings.openai.temperature" :min="0" :max="2"
                                        :step="0.1" :marks="{ 0: '保守', 1: '平衡', 2: '创意' }" />
                                </a-form-item>

                                <a-form-item label="启用OpenAI">
                                    <a-switch v-model:checked="aiSettings.openai.enabled" />
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </a-col>

                    <a-col :span="12">
                        <a-card title="AI助手配置" :bordered="false">
                            <a-form :model="aiSettings.assistant" layout="vertical">
                                <a-form-item label="助手名称">
                                    <a-input v-model:value="aiSettings.assistant.name" placeholder="请输入AI助手名称" />
                                </a-form-item>

                                <a-form-item label="助手描述">
                                    <a-textarea v-model:value="aiSettings.assistant.description" :rows="3"
                                        placeholder="请输入AI助手描述" />
                                </a-form-item>

                                <a-form-item label="系统提示词">
                                    <a-textarea v-model:value="aiSettings.assistant.systemPrompt" :rows="4"
                                        placeholder="请输入系统提示词" />
                                </a-form-item>

                                <a-form-item label="最大对话轮数">
                                    <a-input-number v-model:value="aiSettings.assistant.maxConversations" :min="5"
                                        :max="50" style="width: 100%" />
                                </a-form-item>

                                <a-form-item label="启用AI助手">
                                    <a-switch v-model:checked="aiSettings.assistant.enabled" />
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </a-col>
                </a-row>

                <a-card title="AI功能配置" :bordered="false" style="margin-top: 24px">
                    <a-form :model="aiSettings.features" layout="vertical">
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item label="智能推荐">
                                    <a-switch v-model:checked="aiSettings.features.recommendation" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="自动评分">
                                    <a-switch v-model:checked="aiSettings.features.autoGrading" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="内容生成">
                                    <a-switch v-model:checked="aiSettings.features.contentGeneration" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item label="智能客服">
                                    <a-switch v-model:checked="aiSettings.features.customerService" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="学习分析">
                                    <a-switch v-model:checked="aiSettings.features.learningAnalytics" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="个性化学习">
                                    <a-switch v-model:checked="aiSettings.features.personalizedLearning" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>
            </a-tab-pane>

            <!-- 缓存设置 -->
            <a-tab-pane key="cache" tab="缓存设置">
                <a-card title="缓存配置" :bordered="false">
                    <a-form :model="cacheSettings" layout="vertical">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="缓存类型">
                                    <a-radio-group v-model:value="cacheSettings.type">
                                        <a-radio value="memory">内存缓存</a-radio>
                                        <a-radio value="redis">Redis缓存</a-radio>
                                        <a-radio value="file">文件缓存</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="启用缓存">
                                    <a-switch v-model:checked="cacheSettings.enabled" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="24" v-if="cacheSettings.type === 'redis'">
                            <a-col :span="12">
                                <a-form-item label="Redis主机">
                                    <a-input v-model:value="cacheSettings.redis.host" placeholder="localhost" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="Redis端口">
                                    <a-input-number v-model:value="cacheSettings.redis.port" :min="1" :max="65535"
                                        style="width: 100%" placeholder="6379" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item label="默认缓存时间(秒)">
                                    <a-input-number v-model:value="cacheSettings.defaultTtl" :min="60" :max="86400"
                                        style="width: 100%" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="最大缓存大小(MB)">
                                    <a-input-number v-model:value="cacheSettings.maxSize" :min="10" :max="1000"
                                        style="width: 100%" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="清理间隔(分钟)">
                                    <a-input-number v-model:value="cacheSettings.cleanupInterval" :min="5" :max="60"
                                        style="width: 100%" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-form-item>
                            <a-space>
                                <a-button type="primary" @click="clearCache">清空缓存</a-button>
                                <a-button @click="testCacheConnection">测试连接</a-button>
                                <a-button @click="viewCacheStats">查看统计</a-button>
                            </a-space>
                        </a-form-item>
                    </a-form>
                </a-card>
            </a-tab-pane>

            <!-- 日志设置 -->
            <a-tab-pane key="logs" tab="日志设置">
                <a-card title="日志配置" :bordered="false">
                    <a-form :model="logSettings" layout="vertical">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="日志级别">
                                    <a-select v-model:value="logSettings.level">
                                        <a-select-option value="debug">Debug</a-select-option>
                                        <a-select-option value="info">Info</a-select-option>
                                        <a-select-option value="warn">Warning</a-select-option>
                                        <a-select-option value="error">Error</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="日志保留天数">
                                    <a-input-number v-model:value="logSettings.retentionDays" :min="1" :max="365"
                                        style="width: 100%" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-form-item label="日志输出">
                            <a-checkbox-group v-model:value="logSettings.output">
                                <a-checkbox value="console">控制台</a-checkbox>
                                <a-checkbox value="file">文件</a-checkbox>
                                <a-checkbox value="database">数据库</a-checkbox>
                            </a-checkbox-group>
                        </a-form-item>

                        <a-form-item label="日志格式">
                            <a-textarea v-model:value="logSettings.format" :rows="3"
                                placeholder="日志格式模板，支持变量：{{timestamp}}、{{level}}、{{message}}等" />
                        </a-form-item>

                        <a-form-item>
                            <a-space>
                                <a-button type="primary" @click="downloadLogs">下载日志</a-button>
                                <a-button @click="viewLogs">查看日志</a-button>
                                <a-button danger @click="clearLogs">清空日志</a-button>
                            </a-space>
                        </a-form-item>
                    </a-form>
                </a-card>
            </a-tab-pane>
        </a-tabs>

        <!-- 设置预览 -->
        <a-drawer v-model:open="previewVisible" title="设置预览" placement="right" width="600">
            <a-descriptions :column="1" bordered>
                <a-descriptions-item label="网站名称">{{ websiteSettings.siteName }}</a-descriptions-item>
                <a-descriptions-item label="网站标题">{{ websiteSettings.siteTitle }}</a-descriptions-item>
                <a-descriptions-item label="最小密码长度">{{ securitySettings.minPasswordLength }}</a-descriptions-item>
                <a-descriptions-item label="会话超时">{{ securitySettings.sessionTimeout }}分钟</a-descriptions-item>
                <a-descriptions-item label="SMTP服务器">{{ emailSettings.smtpHost }}</a-descriptions-item>
                <a-descriptions-item label="默认支付方式">{{ paymentSettings.defaultPayment }}</a-descriptions-item>
                <a-descriptions-item label="AI模型">{{ aiSettings.openai.model }}</a-descriptions-item>
                <a-descriptions-item label="缓存类型">{{ cacheSettings.type }}</a-descriptions-item>
                <a-descriptions-item label="日志级别">{{ logSettings.level }}</a-descriptions-item>
            </a-descriptions>
        </a-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message, notification } from 'ant-design-vue'
import {
    PlusOutlined,
    UploadOutlined
} from '@ant-design/icons-vue'

// 响应式数据
const activeTab = ref('website')
const emailTemplateTab = ref('welcome')
const saving = ref(false)
const previewVisible = ref(false)

// 文件列表
const logoFileList = ref([])
const faviconFileList = ref([])
const wechatCertFileList = ref([])

// 网站设置
const websiteSettings = reactive({
    siteName: '蜗牛AI在线课堂',
    siteTitle: 'AI智能体开发实战课程',
    siteDescription: '专业的AI智能体开发在线学习平台，提供从入门到精通的完整课程体系。',
    siteKeywords: ['AI', '智能体', '开发', '课程', '在线学习'],
    icp: '京ICP备12345678号',
    copyright: '© 2024 蜗牛AI在线课堂. All rights reserved.',
    contact: '客服电话：400-123-4567\n邮箱：support@woniuai.com\n地址：北京市朝阳区科技园区'
})

// 安全设置
const securitySettings = reactive({
    minPasswordLength: 8,
    passwordRequirements: ['uppercase', 'lowercase', 'numbers'],
    passwordExpiryDays: 90,
    loginLockEnabled: true,
    maxLoginAttempts: 5,
    lockoutDuration: 30,
    sessionTimeout: 120,
    allowMultipleSessions: true,
    maxSessions: 3,
    forceHttps: true,
    csrfProtection: true,
    xssProtection: true
})

// 邮件设置
const emailSettings = reactive({
    smtpHost: 'smtp.gmail.com',
    smtpPort: 587,
    emailUsername: 'noreply@woniuai.com',
    emailPassword: '',
    encryption: 'tls',
    senderName: '蜗牛AI在线课堂',
    senderEmail: 'noreply@woniuai.com',
    templates: {
        welcome: {
            subject: '欢迎加入蜗牛AI在线课堂',
            content: '<h2>欢迎 {{username}}！</h2><p>感谢您注册{{siteName}}，开始您的AI学习之旅吧！</p>'
        },
        reset: {
            subject: '密码重置 - 蜗牛AI在线课堂',
            content: '<h2>密码重置</h2><p>请点击以下链接重置您的密码：<a href="{{resetLink}}">重置密码</a></p>'
        }
    }
})

// 支付设置
const paymentSettings = reactive({
    alipay: {
        appId: '',
        privateKey: '',
        publicKey: '',
        enabled: true
    },
    wechat: {
        mchId: '',
        key: '',
        enabled: true
    },
    defaultPayment: 'alipay',
    timeout: 30,
    notificationEnabled: true
})

// AI设置
const aiSettings = reactive({
    openai: {
        apiKey: '',
        model: 'gpt-3.5-turbo',
        maxTokens: 2000,
        temperature: 0.7,
        enabled: true
    },
    assistant: {
        name: 'AI学习助手',
        description: '您的专属AI学习助手，帮助您更好地学习AI知识',
        systemPrompt: '你是一个专业的AI学习助手，帮助用户学习AI相关知识。',
        maxConversations: 20,
        enabled: true
    },
    features: {
        recommendation: true,
        autoGrading: true,
        contentGeneration: true,
        customerService: true,
        learningAnalytics: true,
        personalizedLearning: true
    }
})

// 缓存设置
const cacheSettings = reactive({
    type: 'memory',
    enabled: true,
    redis: {
        host: 'localhost',
        port: 6379
    },
    defaultTtl: 3600,
    maxSize: 100,
    cleanupInterval: 30
})

// 日志设置
const logSettings = reactive({
    level: 'info',
    retentionDays: 30,
    output: ['console', 'file'],
    format: '{{timestamp}} [{{level}}] {{message}}'
})

// 方法
const beforeLogoUpload = (file: File) => {
    const isImage = file.type.startsWith('image/')
    if (!isImage) {
        message.error('只能上传图片文件！')
        return false
    }
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
        message.error('图片大小不能超过2MB！')
        return false
    }
    return false // 阻止自动上传
}

const beforeFaviconUpload = (file: File) => {
    const isImage = file.type.startsWith('image/')
    if (!isImage) {
        message.error('只能上传图片文件！')
        return false
    }
    const isLt1M = file.size / 1024 / 1024 < 1
    if (!isLt1M) {
        message.error('图标大小不能超过1MB！')
        return false
    }
    return false
}

const beforeWechatCertUpload = (file: File) => {
    const isValidType = file.name.endsWith('.pem') || file.name.endsWith('.p12')
    if (!isValidType) {
        message.error('只能上传.pem或.p12格式的证书文件！')
        return false
    }
    return false
}

const testEmailConnection = () => {
    message.loading('正在测试邮件连接...', 2).then(() => {
        message.success('邮件连接测试成功！')
    })
}

const sendTestEmail = () => {
    message.loading('正在发送测试邮件...', 2).then(() => {
        message.success('测试邮件发送成功！')
    })
}

const clearCache = () => {
    message.loading('正在清空缓存...', 2).then(() => {
        message.success('缓存清空成功！')
    })
}

const testCacheConnection = () => {
    message.loading('正在测试缓存连接...', 2).then(() => {
        message.success('缓存连接测试成功！')
    })
}

const viewCacheStats = () => {
    notification.info({
        message: '缓存统计',
        description: '内存使用: 45MB\n命中率: 85%\n总请求: 1,234次',
        duration: 5
    })
}

const downloadLogs = () => {
    message.loading('正在下载日志文件...', 2).then(() => {
        message.success('日志文件下载成功！')
    })
}

const viewLogs = () => {
    notification.info({
        message: '日志查看',
        description: '已打开日志查看器，请在新窗口中查看详细日志信息。',
        duration: 5
    })
}

const clearLogs = () => {
    message.loading('正在清空日志...', 2).then(() => {
        message.success('日志清空成功！')
    })
}

const resetSettings = () => {
    message.warning('确定要重置所有设置吗？此操作不可恢复！')
}

const saveAllSettings = () => {
    saving.value = true
    setTimeout(() => {
        saving.value = false
        message.success('所有设置保存成功！')
    }, 2000)
}

onMounted(() => {
    console.log('系统设置页面加载完成')
})
</script>

<style scoped>
.system-settings {
    padding: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ant-card {
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ant-card-head {
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 8px 8px 0 0;
}

.ant-form-item {
    margin-bottom: 16px;
}

.ant-upload-list-picture-card .ant-upload-list-item {
    width: 104px;
    height: 104px;
}

.ant-descriptions-item-label {
    font-weight: 600;
    width: 120px;
}

/* 标签页样式优化 */
:deep(.ant-tabs-nav) {
    margin-bottom: 24px;
}

:deep(.ant-tabs-tab) {
    padding: 12px 24px;
    font-weight: 500;
}

:deep(.ant-tabs-tab-active) {
    background: #e6f7ff;
    border-radius: 6px 6px 0 0;
}

/* 表单样式优化 */
:deep(.ant-form-item-label > label) {
    font-weight: 500;
    color: #333;
}

:deep(.ant-input),
:deep(.ant-select-selector),
:deep(.ant-input-number) {
    border-radius: 6px;
    transition: all 0.3s ease;
}

:deep(.ant-input:focus),
:deep(.ant-select-focused .ant-select-selector),
:deep(.ant-input-number-focused) {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 按钮样式优化 */
:deep(.ant-btn) {
    border-radius: 6px;
    transition: all 0.3s ease;
}

:deep(.ant-btn:hover) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 开关样式优化 */
:deep(.ant-switch) {
    background: #d9d9d9;
}

:deep(.ant-switch-checked) {
    background: #1890ff;
}

/* 滑块样式优化 */
:deep(.ant-slider-track) {
    background: #1890ff;
}

:deep(.ant-slider-handle) {
    border-color: #1890ff;
}

/* 上传组件样式优化 */
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
    border-radius: 8px;
    overflow: hidden;
}

:deep(.ant-upload.ant-upload-select-picture-card) {
    border-radius: 8px;
    border: 2px dashed #d9d9d9;
    transition: all 0.3s ease;
}

:deep(.ant-upload.ant-upload-select-picture-card:hover) {
    border-color: #1890ff;
    background: #f0f9ff;
}

/* 页面头部样式优化 */
:deep(.ant-page-header) {
    background: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
}

:deep(.ant-page-header-heading-title) {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

:deep(.ant-page-header-heading-sub-title) {
    color: #666;
    font-size: 14px;
}

/* 描述列表样式优化 */
:deep(.ant-descriptions-bordered .ant-descriptions-item-label) {
    background: #fafafa;
    font-weight: 600;
    color: #333;
}

:deep(.ant-descriptions-bordered .ant-descriptions-item-content) {
    background: #fff;
}

/* 通知样式优化 */
:deep(.ant-notification-notice) {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 抽屉样式优化 */
:deep(.ant-drawer-content) {
    border-radius: 8px 0 0 8px;
}

:deep(.ant-drawer-header) {
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
</style>